<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Minimal Vertical Splitter</title>
<script type="text/javascript" src="../lib/jquery.js"></script>
<script type="text/javascript" src="../splitter.js"></script>

<!-- General page styles (not critical to the demos) -->
<link rel="stylesheet" type="text/css" href="main.css" />

<style type="text/css" media="all">
.simple {
	height: 200px;
	width: 500px;
	border: 5px solid #aaa;
}
.simple div {
	overflow: auto;
}
.splitter-bar-vertical {
	width: 5px;
	background: #cab;
}


.splitter {
    height: 400px;
    margin: 1em 3em;
    border: 4px solid #bdb;
    background: #f8fff8;
}

.ui-state-default { background-color: #aca }
.ui-state-hover { background-color: #bdb }
.ui-state-highlight { background-color: #add }
.ui-state-error { background-color: #eaa }

.splitter-pane {
    overflow: auto;
}
.splitter-bar-vertical {
    width: 6px;
    background-image: url(img/vgrabber.gif);
    background-repeat: no-repeat;
    background-position: center;
}
.splitter-bar-vertical-docked {
    width: 10px;
    background-image: url(img/vdockbar-trans.gif);
    background-repeat: no-repeat;
    background-position: center;
}
.splitter-bar.ui-state-highlight {
    opacity: 0.7;
}
.splitter-iframe-hide {
    visibility: hidden;
}

</style>
<script type="text/javascript">
$().ready(function() {
	$(".simple").splitter();
});
</script>
</head>
<body>

<h1>jQuery Minimal Vertical Splitter</h1>
<p>
This example shows the minimum code and markup required to create a vertical splitter with fixed height and width, with a class to set minimal styles and using plugin defaults for all settings. 
</p>
<p>
<a href="index.html">See the splitter documentation</a>
</p>
<div class="simple">
	<div>
	This is the left pane of the minimal vertical splitter. Easy, eh?
	</div>
	<div>
	This is the right pane of the minimal vertical splitter. No initial size or position was given, so the two panes start at the same size. The other examples are more complex, but show typical markup and code.
	</div>
</div>

</body>
</html>
